<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WIFI助手 - 首页</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            color: #202124;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        /* iPhone 样式外壳 */
        .phone-container {
            position: relative;
            width: 375px;
            height: 812px;
            background-color: #111;
            border-radius: 40px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding: 10px;
        }
        
        /* 顶部刘海 */
        .notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 30px;
            background-color: #111;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            z-index: 10;
        }
        
        /* 底部指示条 */
        .home-indicator {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 140px;
            height: 5px;
            background-color: #f0f0f0;
            border-radius: 3px;
            z-index: 10;
        }
        
        /* 音量按钮 */
        .volume-button {
            position: absolute;
            left: -2px;
            top: 120px;
            width: 4px;
            height: 30px;
            background-color: #2a2a2a;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
        
        .volume-button:before {
            content: '';
            position: absolute;
            left: 0;
            top: -40px;
            width: 4px;
            height: 30px;
            background-color: #2a2a2a;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
        
        /* 电源按钮 */
        .power-button {
            position: absolute;
            right: -2px;
            top: 120px;
            width: 4px;
            height: 60px;
            background-color: #2a2a2a;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }
        
        /* 屏幕 */
        .screen {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #EDEDED; /* 微信背景色 */
            border-radius: 32px;
            overflow: hidden;
            z-index: 1;
        }
        
        /* App顶部状态栏 */
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 15px;
            height: 30px;
            background-color: #EDEDED;
        }
        
        .status-bar .time {
            font-weight: 600;
            font-size: 14px;
        }
        
        .status-bar .icons {
            display: flex;
            gap: 5px;
        }
        
        .status-bar .icons .icon {
            font-size: 14px;
        }
        
        /* App内容区域 */
        .app-content {
            position: relative;
            height: calc(100% - 30px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            padding-bottom: 60px; /* 为底部导航腾出空间 */
        }
        
        /* WIFI状态卡片 */
        .wifi-status-card {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .wifi-status-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .wifi-status-title {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
        }
        
        .wifi-refresh-btn {
            color: #07C160; /* 微信绿 */
            background: none;
            border: none;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .wifi-signal-indicator {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 0;
        }
        
        .signal-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(7,193,96,0.1) 0%, rgba(7,193,96,0.05) 70%, rgba(7,193,96,0) 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .signal-icon {
            font-size: 32px;
            color: #07C160; /* 微信绿 */
        }
        
        .signal-waves {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            border: 1.5px solid rgba(7,193,96,0.2);
            animation: pulse 2s infinite;
        }
        
        .signal-waves:nth-child(2) {
            animation-delay: 0.5s;
        }
        
        .signal-waves:nth-child(3) {
            animation-delay: 1s;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(0.5);
                opacity: 1;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        
        .wifi-name-display {
            text-align: center;
            margin-bottom: 15px;
        }
        
        .wifi-name-display h2 {
            font-size: 18px;
            font-weight: 500;
            color: #000000;
        }
        
        .wifi-status-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 15px;
        }
        
        .status-item {
            display: flex;
            flex-direction: column;
            padding: 12px;
            background-color: #F7F7F7;
            border-radius: 10px;
        }
        
        .status-label {
            font-size: 13px;
            color: #888888;
            margin-bottom: 5px;
        }
        
        .status-value {
            font-size: 15px;
            font-weight: 500;
            color: #333333;
        }
        
        .status-strong {
            color: #07C160; /* 微信绿 */
        }
        
        /* WIFI列表卡片 */
        .wifi-list-card {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .wifi-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .wifi-list-title {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
        }
        
        .wifi-scan-btn {
            background: none;
            border: none;
            color: #07C160; /* 微信绿 */
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .wifi-list {
            list-style: none;
        }
        
        .wifi-item {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #F2F2F2;
            align-items: center;
            cursor: pointer;
        }
        
        .wifi-item:last-child {
            border-bottom: none;
        }
        
        .wifi-item:active {
            background-color: #F7F7F7;
        }
        
        .wifi-icon {
            margin-right: 15px;
            color: #07C160; /* 微信绿 */
            font-size: 24px;
        }
        
        .wifi-details {
            flex: 1;
        }
        
        .wifi-name {
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            margin-bottom: 3px;
        }
        
        .wifi-description {
            font-size: 13px;
            color: #888888;
        }
        
        .wifi-connected {
            color: #07C160; /* 微信绿 */
            font-size: 13px;
        }
        
        /* 旋转动画 */
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        .rotating {
            animation: rotate 2s linear infinite;
        }
        
        /* 底部导航栏 */
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: #F7F7F7;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #E6E6E6;
            z-index: 100;
            border-bottom-left-radius: 32px;
            border-bottom-right-radius: 32px;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            cursor: pointer;
        }
        
        .nav-icon {
            color: #888888;
            margin-bottom: 4px;
        }
        
        .nav-label {
            font-size: 12px;
            color: #888888;
        }
        
        .nav-active .nav-icon, 
        .nav-active .nav-label {
            color: #07C160; /* 微信绿 */
        }
        
        /* 提示信息 */
        .toast {
            position: fixed;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            z-index: 1000;
            font-size: 15px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- iPhone外壳元素 -->
        <div class="notch"></div>
        <div class="home-indicator"></div>
        <div class="volume-button"></div>
        <div class="power-button"></div>
        
        <!-- 屏幕内容 -->
        <div class="screen">
            <!-- 顶部状态栏 -->
            <div class="status-bar">
                <div class="time">20:08</div>
                <div class="icons">
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">signal_cellular_alt</i></div>
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">wifi</i></div>
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">battery_full</i></div>
                </div>
            </div>
            
            <!-- App内容区域 -->
            <div class="app-content">
                <!-- WIFI状态卡片 -->
                <div class="wifi-status-card">
                    <div class="wifi-status-header">
                        <div class="wifi-status-title">WIFI状态</div>
                        <button class="wifi-refresh-btn" id="refreshBtn">
                            <i class="material-icons">refresh</i>
                        </button>
                    </div>
                    
                    <div class="wifi-name-display">
                        <h2>Home_WIFI_5G</h2>
                    </div>
                    
                    <div class="wifi-signal-indicator">
                        <div class="signal-circle">
                            <div class="signal-waves"></div>
                            <div class="signal-waves"></div>
                            <div class="signal-waves"></div>
                            <i class="material-icons signal-icon">wifi</i>
                        </div>
                    </div>
                    
                    <div class="wifi-status-details">
                        <div class="status-item">
                            <div class="status-label">可用性</div>
                            <div class="status-value status-strong">已连接</div>
                        </div>
                        <div class="status-item">
                            <div class="status-label">信号强度</div>
                            <div class="status-value status-strong">-58 dBm</div>
                        </div>
                        <div class="status-item">
                            <div class="status-label">网络连接时长</div>
                            <div class="status-value status-strong">45 分钟</div>
                        </div>
                        <div class="status-item">
                            <div class="status-label">IP地址</div>
                            <div class="status-value">192.168.1.5</div>
                        </div>
                    </div>
                </div>
                
                <!-- WIFI列表卡片 -->
                <div class="wifi-list-card">
                    <div class="wifi-list-header">
                        <div class="wifi-list-title">可用WIFI</div>
                        <button class="wifi-scan-btn" id="scanBtn">
                            <i class="material-icons">search</i>
                        </button>
                    </div>
                    
                    <ul class="wifi-list" id="wifiList">
                        <li class="wifi-item">
                            <i class="material-icons wifi-icon">wifi</i>
                            <div class="wifi-details">
                                <div class="wifi-name">Home_WIFI_5G</div>
                                <div class="wifi-description">WPA/WPA2</div>
                            </div>
                            <div class="wifi-connected">已连接</div>
                        </li>
                        
                        <li class="wifi-item">
                            <i class="material-icons wifi-icon">wifi</i>
                            <div class="wifi-details">
                                <div class="wifi-name">Neighbor_WIFI</div>
                                <div class="wifi-description">WPA/WPA2</div>
                            </div>
                        </li>
                        
                        <li class="wifi-item">
                            <i class="material-icons wifi-icon">wifi</i>
                            <div class="wifi-details">
                                <div class="wifi-name">CoffeeShop_Free</div>
                                <div class="wifi-description">开放网络</div>
                            </div>
                        </li>
                        
                        <li class="wifi-item">
                            <i class="material-icons wifi-icon">wifi</i>
                            <div class="wifi-details">
                                <div class="wifi-name">Public_WIFI</div>
                                <div class="wifi-description">WEP</div>
                            </div>
                        </li>
                        
                        <li class="wifi-item">
                            <i class="material-icons wifi-icon">wifi</i>
                            <div class="wifi-details">
                                <div class="wifi-name">Guest_Network</div>
                                <div class="wifi-description">WPA/WPA2</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item nav-active">
                    <i class="material-icons nav-icon">wifi</i>
                    <div class="nav-label">首页</div>
                </div>
                <div class="nav-item">
                    <i class="material-icons nav-icon">speed</i>
                    <div class="nav-label">测速</div>
                </div>
                <div class="nav-item">
                    <i class="material-icons nav-icon">location_on</i>
                    <div class="nav-label">IP查询</div>
                </div>
            </div>
            
            <!-- 提示信息 -->
            <div class="toast" id="toast"></div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const refreshBtn = document.getElementById('refreshBtn');
        const scanBtn = document.getElementById('scanBtn');
        const wifiList = document.getElementById('wifiList');
        const toast = document.getElementById('toast');
        
        // 随机信号强度生成函数
        function getRandomSignalStrength() {
            return `-${Math.floor(Math.random() * 30) + 45} dBm`;
        }
        
        // 随机连接时间生成函数
        function getRandomConnectionTime() {
            return `${Math.floor(Math.random() * 120) + 1} 分钟`;
        }
        
        // 显示提示信息
        function showToast(message, duration = 2000) {
            toast.textContent = message;
            toast.style.display = 'block';
            
            setTimeout(() => {
                toast.style.display = 'none';
            }, duration);
        }
        
        // 更新WIFI状态信息
        function updateWifiStatus() {
            document.querySelector('.status-item:nth-child(2) .status-value').textContent = getRandomSignalStrength();
            document.querySelector('.status-item:nth-child(3) .status-value').textContent = getRandomConnectionTime();
        }
        
        // 更新时间
        function updateTime() {
            const now = new Date();
            let hours = now.getHours();
            let minutes = now.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes;
            document.querySelector('.time').textContent = `${hours}:${minutes}`;
        }
        
        // 刷新WIFI状态按钮点击事件
        refreshBtn.addEventListener('click', function() {
            this.classList.add('rotating');
            showToast('正在刷新WIFI状态...');
            
            setTimeout(() => {
                updateWifiStatus();
                this.classList.remove('rotating');
                showToast('WIFI状态已更新');
            }, 1000);
        });
        
        // 扫描WIFI按钮点击事件
        scanBtn.addEventListener('click', function() {
            this.classList.add('rotating');
            showToast('正在扫描可用WIFI...');
            
            setTimeout(() => {
                // 模拟扫描结果 - 随机添加一个新的WIFI网络
                const wifiNames = ['Home_Network', 'Office_5G', 'AndroidAP', 'iPhone_Hotspot', 'Visitor_WIFI', 'Café_Free'];
                const randomName = wifiNames[Math.floor(Math.random() * wifiNames.length)];
                
                const newWifi = document.createElement('li');
                newWifi.className = 'wifi-item';
                newWifi.innerHTML = `
                    <i class="material-icons wifi-icon">wifi</i>
                    <div class="wifi-details">
                        <div class="wifi-name">${randomName}</div>
                        <div class="wifi-description">WPA/WPA2</div>
                    </div>
                `;
                
                // 随机插入到列表中
                const position = Math.floor(Math.random() * (wifiList.children.length + 1));
                if (position === wifiList.children.length) {
                    wifiList.appendChild(newWifi);
                } else {
                    wifiList.insertBefore(newWifi, wifiList.children[position]);
                }
                
                this.classList.remove('rotating');
                showToast('发现新的WIFI网络');
                
                // 为新添加的WIFI项添加点击事件
                newWifi.addEventListener('click', handleWifiItemClick);
            }, 1500);
        });
        
        // WIFI列表项点击事件处理
        function handleWifiItemClick() {
            const wifiName = this.querySelector('.wifi-name').textContent;
            const isConnected = this.querySelector('.wifi-connected');
            
            if (!isConnected) {
                showToast(`正在连接到 ${wifiName}...`);
                
                // 移除所有已连接状态
                document.querySelectorAll('.wifi-connected').forEach(el => el.remove());
                
                // 添加已连接状态
                const connectedStatus = document.createElement('div');
                connectedStatus.className = 'wifi-connected';
                connectedStatus.textContent = '已连接';
                this.appendChild(connectedStatus);
                
                // 更新顶部显示的WIFI名称
                document.querySelector('.wifi-name-display h2').textContent = wifiName;
                
                // 更新WIFI状态
                document.querySelector('.status-item:nth-child(1) .status-value').textContent = '已连接';
                updateWifiStatus();
                
                setTimeout(() => {
                    showToast(`已成功连接到 ${wifiName}`);
                }, 1500);
            } else {
                showToast(`已经连接到 ${wifiName}`);
            }
        }
        
        // 为WIFI列表项添加点击事件
        document.querySelectorAll('.wifi-item').forEach(item => {
            item.addEventListener('click', handleWifiItemClick);
        });
        
        // 底部导航栏切换
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有活动状态
                navItems.forEach(ni => ni.classList.remove('nav-active'));
                // 添加当前活动状态
                this.classList.add('nav-active');
                
                // 获取点击的导航项类型
                const navType = this.querySelector('.nav-label').textContent;
                
                // 如果点击的不是当前页面，跳转到相应页面
                if (navType !== '首页') {
                    const toast = document.createElement('div');
                    toast.style.position = 'fixed';
                    toast.style.bottom = '70px';
                    toast.style.left = '50%';
                    toast.style.transform = 'translateX(-50%)';
                    toast.style.background = 'rgba(0,0,0,0.7)';
                    toast.style.color = 'white';
                    toast.style.padding = '12px 20px';
                    toast.style.borderRadius = '8px';
                    toast.style.zIndex = '1000';
                    toast.style.fontSize = '15px';
                    toast.textContent = `正在加载${navType}页面...`;
                    document.body.appendChild(toast);
                    
                    // 根据点击的导航项确定跳转页面
                    let targetPage = '';
                    if (navType === '测速') {
                        targetPage = 'speed_test.html';
                    } else if (navType === 'IP查询') {
                        targetPage = 'ip_lookup.html';
                    }
                    
                    // 500毫秒后跳转，给提示显示的时间
                    setTimeout(() => {
                        window.location.href = targetPage;
                    }, 500);
                }
            });
        });
        
        // 初始更新时间
        updateTime();
        
        // 每分钟更新一次时间
        setInterval(updateTime, 60000);
    </script>
</body>
</html> 